<template>
	<view>
		<view class="box">
			<view class="pl15 pr15 menu_content_box_page">

				<view class="mt15 area_block_1" v-for="item,index in carList" :key="index" v-if="carList.length > 0">
					<view class="flex_box" v-if="item.state == 1 || item.state == 2" @tap.stop="toEdit(item.id)">
						<view class="re mr25">
							<image  :lazy-load="true" :src="item.imgUrl" class="img17 vt"></image> 				</view>
						<view class="item">
							<view class="df fldc jcsb hp100">
								<view class="fs28 lh34 cor_333 ell">{{item.name}}</view>
								<view class="fs22 cor_808"
									style="widht: 200rpx;height: 22rpx;overflow: hidden;text-overflow:ellipsis; white-space: nowrap;">
									提交时间：{{item.createTime}}</view>
							</view>
						</view>
					</view>
					<view class="flex_box" v-if="item.state == 3 || item.state == 4" @tap.stop="toDetail(item.diggerId)">
						<view class="re mr25">
						<image :lazy-load="true" :src="item.imgUrl" class="img17 vt"></image> 						</view>
						<view class="item">
							<view class="df fldc jcsb hp100">
								<view class="fs28 lh34 cor_333 ell">{{item.name}}</view>
								<view class="fs22 cor_808"
									style="widht: 200rpx;height: 22rpx;overflow: hidden;text-overflow:ellipsis; white-space: nowrap;">
									提交时间：{{item.createTime}}</view>
							</view>
						</view>
					</view>
					<image v-if="item.state == 1"  :lazy-load="true" src="/static/icon_watermark_2.png" class="watermark_img_pos"
						@tap.stop="toEdit(item.id)"></image>
					<image v-if="item.state == 2" :lazy-load="true" src="/static/icon_watermark_1.png" class="watermark_img_pos"
						@tap.stop="toEdit(item.id)"></image> 					
					<view v-if="item.state == 3" class="view_report_btn" @tap.stop="report(item.reportId)">查看报告</view>
					<image v-if="item.state ==4" :lazy-load="true" src="/static/icon_watermark_10.png" class="watermark_img_pos"
						@tap.stop="toDetail(item.diggerId)"></image> 				
				</view>

				<view v-if="carList.length == 0" style="width: 100%;height: 100vh;">
					<view style="height: 200rpx;"></view>
					<image :lazy-load="true"  src="../../static/excavator.png" style="width: 100%; padding: 100rpx 200rpx;"></image>			
					<view style="width: 100%;text-align: center;color: #808080;">暂无数据</view>
				</view>

			</view><!-- pl15 pr15 -->



			<!-- 上传设备图片-按钮 -->
			<view class="consult_immediately_btn" @tap="toAdd()">添加卖车咨询</view>
			 <!-- box -->
		</view>
	</view>
</template>

<script>
	import {
		toast,
		showLoading,
		hideLoading
	} from '@/utils/toast.js';
	import {
		getInfoListApi,
	} from '@/http/api.js';
	export default {
		data() {
			return {
				carList: [],
				pageIndex: 1,
				pageSize: 10,
				userId: uni.getStorageSync('userId')
			}
		},
		onLoad() {
			if (!uni.getStorageSync('userId')) {
				uni.reLaunch({
					url: '/pages/Sign_in/Sign_in'
				})
			}

			this.getInfoList();
		},
		onBackPress() {
		    uni.redirectTo({
		    	url: '/pages/personal_center/personal_center'
		    })
			return true;
		},
		methods: {
			toAdd() {
				uni.navigateTo({
					url: '/pages/information_collection/information_collection'
				})
			},

			getInfoList() {
				let that = this;
				showLoading('加载中');
				getInfoListApi({
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
					userId: this.userId
				}).then(res => {
					that.carList = res.data.data;
					that.pageIndex = res.data.currentPage + 1;
					hideLoading();
				}).catch(err => {
					toast(err.msg);
					hideLoading();
				})
			},

			report(reportId) {
				uni.navigateTo({
					url: '/pages/car_report/car_report_read?id=' + reportId
				})
			},

			toEdit(id) {
				uni.navigateTo({
					url: '/pages/information_collection_two/information_collection_two?id=' + id
				})
			},

			toDetail(id) {
				
				uni.navigateTo({
					url: '/pages/purchase_information_details/purchase_information_details?id=' + id
				})
			}
		}
	}
</script>

<style>
	page {
		background: #f7f6f6;
	}

	.menu_content_box_page {
		position: relative;
		/* height: calc(100vh - 98rpx); */
		background-color: #f7f6f6;
		padding-bottom: 98rpx;
	}

	.area_block_1 {
		position: relative;
		padding: 32rpx 135rpx 30rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.watermark_img_pos {
		position: absolute;
		right: 10rpx;
		bottom: 18rpx;
		width: 92rpx;
		height: 92rpx;
		z-index: 2;
	}

	.view_report_btn {
		position: absolute;
		top: 50%;
		right: 0;
		width: 120rpx;
		height: 48rpx;
		line-height: 48rpx;
		font-size: 22rpx;
		color: #fff;
		text-align: center;
		background-image: linear-gradient(90deg, #f46933, #e3140b);
		border-radius: 24rpx 0 0 24rpx;
		z-index: 2;
		transform: translateY(-50%);
	}

	.consult_immediately_btn {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		display: block;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
		background: linear-gradient(90deg, #f44f33, #e10d09);
		z-index: 3;
	}
</style>
